import Icon from '@/components/Icon';
import utils from '@/utils';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useMemo, useState } from 'react';
import { getDispatch } from '../../../dva';
import styles from './index.h5.module.scss';

const MoreNavBar = ({ showIcon }) => {
  const dispatch = useMemo(() => {
    return getDispatch();
  }, []);

  const [isFold, setIsFold] = useState(false);
  const toggle = () => {
    setIsFold(!isFold);
  };

  const list = useMemo(() => {
    const { search, allGoods, cart, userCenter } = showIcon ?? {};

    const temp = [
      {
        enabled: search,
        icon: 'a-tubiaoai_huaban2fuben31',
        size: 40,
        onClick: () => {
          Taro.navigateTo({ url: '/mainSubPack/searchResult/index' });
        },
      },
      {
        size: 40,
        enabled: allGoods,
        icon: 'a-9-9_huaban2fuben10',
        onClick: () => {
          Taro.navigateTo({
            url: `/mainSubPack/appProducts/index?title=${encodeURIComponent(
              '全部商品',
            )}&goodsSelectInfo={"type":"4"}`,
          });
        },
      },
      {
        size: 40,
        enabled: cart,
        icon: 'a-2',
        onClick: () => {
          utils.goCartPage(dispatch);
        },
      },
      {
        enabled: userCenter,
        size: 40,
        icon: 'a-tubiaoai_huaban2fuben7',
        onClick: () => {
          utils.goMePage(dispatch);
        },
      },
    ]
      // 筛选启用的
      .filter(({ enabled }) => {
        return enabled;
      });

    // 区分折叠
    return temp.map((item, index) => {
      if (index > 0) {
        return {
          ...item,
          size: isFold ? 0 : 40,
          className: isFold ? 'fold' : 'expand',
        };
      }

      return item;
    });
  }, [showIcon, isFold]);

  if (!list?.length) {
    return null;
  }

  console.log('==================', { list });

  return (
    <View className={`${styles.MoreNavBar} ${list.length === 1 ? 'one' : ''}`}>
      {list.map(({ enabled, icon, onClick, className, size }) => {
        if (!enabled) {
          return null;
        }

        return (
          <Icon
            key={icon}
            className={`icon ${className}`}
            name={icon}
            size={size}
            color="#000000"
            onClick={onClick}
          />
        );
      })}

      {list?.length > 1 && (
        <View className={`more ${isFold ? 'fold' : ''}`}>
          <View className="split-line"></View>

          <Icon
            className="toggle"
            name={isFold ? 'a-tubiaoai_huaban2fuben11' : 'a-4'}
            color="#000000"
            size={32}
            onClick={toggle}
          />
        </View>
      )}
    </View>
  );
};

export default MoreNavBar;
